<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="12" class="header_content_box">
          <div class="order_box">
            <label>商品搜索:</label>
            <el-input v-model="query.skuName" placeholder="请输入" style="width: 206px" clearable />
          </div>
          <div class="date_box">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="margin-left: 10px; width: 80px; padding: 0"
              @click="searchSubmit"
            >搜索</el-button>
          </div>
        </el-col>
        <el-col :span="12"><div /></el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row style="margin:0 0 20px 0">
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-circle-plus-outline" style="background: linear-gradient(135deg,#ff9743,#ff5e20)!important;border:0;width:80px;height:36px;padding:0" @click="openAddGoods('add')">新建</el-button>
          <el-button type="primary" style="background-color: #fbf4f0!important;color: #655b56!important;border:0;width:80px;height:36px;padding:0" @click="openImportDataDiaglog">导入数据</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="loading" style="width: 100%" :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }" :data="list">
        <el-table-column prop="number" label="序号" />
        <el-table-column prop="skuName" label="商品名称" />
        <el-table-column label="商品图片">
          <template v-slot="{row}">
            <el-avatar :src="row.skuImage" size="small" style="background:#f3f6fb" />
            <!-- <img :src="row.skuImage" alt=""> -->
            <!-- <el-avatar shape="square" :size="100" :fit="fit" :src="row.skuImage" /> -->
          </template>
        </el-table-column>
        <el-table-column prop="brandName" label="品牌" />
        <el-table-column prop="unit" label="规格" />
        <el-table-column prop="price" label="商品价格">
          <template v-slot="{row}">
            <span>{{ row.price/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="skuClass.className" label="商品类型" />
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column prop="address" label="操作">
          <template v-slot="{row}">
            <el-button type="text" size="small" style="font-size:14px;color:#5F84FF" @click="openAddGoods('edit',row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="totalCount>10"
        style="height:96px;padding:32px 16px;"
        :current-page="query.pageIndex"
        :page-size="query.pageSize"
        layout="slot"
      >
        <div class="el-pagination_main">
          <span class="el-pagination__total">共{{ totalCount }}条记录&nbsp;&nbsp;第&nbsp;{{ query.pageIndex }}/{{ Math.ceil(totalCount/query.pageSize) }}&nbsp;页</span>
          <div>
            <button ref="btnPrev" class="btn-prev" :class="{btnColor:query.pageIndex===1}" :disabled="disable || query.pageIndex===1 ? true :false" @click="handleCurrentChange('prev')">上一页</button>
            <button ref="btnNext" class="btn-next" :disabled="disableNext" @click="handleCurrentChange('next')">下一页</button>
          </div>
        </div>
      </el-pagination>
      <addGoods ref="diaglog" :dialog-visible="dialogVisible" :title="title" :detail="detail" @handleClose="handleClose" @initTableData="initTableData" />
      <importData :import-data-diaglog="importDataDiaglog" @handleClose="handleClose" />
    </el-main>

  </el-container>
</template>

<script>
import { getGoodsListInfo } from '@/api/goods'
import addGoods from './components/addGoods.vue'
import importData from './components/importData.vue'
export default {
  name: '',
  components: {
    addGoods,
    importData
  },
  data() {
    return {
      list: [],
      loading: true,
      totalCount: null,
      totalPage: null,
      query: {
        pageIndex: 1,
        pageSize: 10,
        skuName: null
      },
      disable: false,
      dialogVisible: false,
      title: '',
      detail: {},
      value: [],
      disableNext: false,
      importDataDiaglog: false

    }
  },
  created() {
    this.initTableData()
  },
  methods: {
    openImportDataDiaglog() {
      console.log(1111)
      this.importDataDiaglog = true
    },
    // 打开弹框
    openAddGoods(title, row) {
      if (title === 'edit') {
        this.dialogVisible = true
        this.title = title
        this.detail = row
        console.log('row', row)
        setTimeout(() => {
          this.$refs.diaglog.changeInfo()
        }, 0)
      } else {
        this.dialogVisible = true
        this.title = title
      }
    },
    // 弹框关闭
    handleClose(value) {
      this.dialogVisible = value
      this.importDataDiaglog = false
    },
    // 跳转页面
    handleCurrentChange(current) {
      if (current === 'next') {
        this.disable = false
        this.$refs.btnPrev.classList.remove('btnColor')
        this.query.pageIndex++
        if (this.query.pageIndex >= Math.ceil(this.totalCount / this.query.pageSize)) {
          console.log(1)
          this.disableNext = true
          this.$refs.btnNext.classList.add('btnColor')
        }
        console.log('当前页', this.query.pageIndex)
        this.initTableData()
      } else {
        this.disableNext = false
        this.$refs.btnNext.classList.remove('btnColor')
        if (this.query.pageIndex > 1) {
          this.query.pageIndex--
          console.log('当前页', this.query.pageIndex)
          this.initTableData()
        } else {
          this.disable = true
          console.log(this.$refs.btnPrev)
          this.$refs.btnPrev.classList.add('btnColor')
        }
      }
    },
    // 初始化表格数据渲染
    async initTableData() {
      this.loading = true
      const data = await getGoodsListInfo(this.query)
      console.log('初始化数据', data)
      this.totalCount = data.totalCount
      data.currentPageRecords.forEach((item, index) => {
        item.number = index + 1 + ((this.query.pageIndex - 1) * 10)
      })
      this.list = data.currentPageRecords
      this.loading = false
    },
    searchSubmit() {
      this.initTableData()
    }
  }
}
</script>

<style scoped lang="less">
.el-container {
  margin-top: 70px;
  padding: 0 20px;
  .el-header {
    background-color: #fff;
    padding: 0 0 0 17px;
    margin: 0 0 20px;
    .el-row {
      line-height: 60px;
      .header_content_box {
        height: 60px;
        display: flex;
        justify-content: flex-end;
        .order_box {
          width: 280px;
          height: 36px;
          margin: auto;
          line-height: 36px;
          margin-right: 10px;
          display: flex;
          /deep/.el-input {
            .el-input__inner {
              height: 36px;
            }
          }
        }
        .date_box {
          flex: 1;
          height: 36px;
          line-height: 36px;
          margin: auto;
          display: flex;
          .el-input__inner {
            height: 36px;
          }
        }
        label {
          color: #606266;
          font-size: 14px;
          font-weight: normal;
          width: 72px;
          text-align: left;
          height: 36px;
          line-height: 36px;
          padding: 0 12px 0 0;
        }
      }
    }
  }
  .el-main {
    background-color: #fff;
   /deep/.el-table {
    .el-table__body-wrapper{
     .el-table__body{
      .el-table__row{
        td{
            border: none;
        }
      }
     }
    }
    }
    /deep/.el-pagination{
      .el-pagination_main{
        display: flex;
        justify-content: space-between;
      }
      .el-pagination__total{
       font-size: 16px;
       color: #DBDFE5;
      }
      .btn-prev{
      width:70px;
      height:32px;
      background-color:#D5DDF8;
      border-radius: 2px;
      color: #606266;
      font-size: 13px;
      margin:0 16px;
      padding: 0;
      }
      .btn-next{
        width:70px;
      height:32px;
      background-color:#D5DDF8;
      border-radius: 2px;
      color: #606266;
      font-size: 13px;
      margin:0 16px;
      padding: 0;

      }
      .btnColor{
      background-color: #edf0f9;
      color: #D8DDE3;
  }
    }
  }
}
</style>
